import React, {
  FC,
  useContext,
  CSSProperties,
  ReactChild,
  cloneElement,
  ReactNode,
  Children,
  useState,
  useCallback,
  useEffect,
  FunctionComponentElement,
} from 'react';
import classNames from 'classnames';
import FormContext from './context';
import { itemType } from './item';
// import { formType } from './interface';

export interface formType {
  name?: string;
  initialValues?: object;
  formRef?: any; // 这个类型不知道肿么写，ε=(´ο｀*)))
  className?: string;
}

export const form: FC<formType> = props => {
  const requireArr = useState([]); // 保存 必填校验字段名称   【{name:'price',label: '单价'}】
  const [values, setValues] = useState({}); // 保存 数据
  const { initialValues, children, name } = props;

  // 初始化设置value
  useEffect(() => {
    // todo 该有一个工具方法，判断有值的时候就更新一次，或者在 封装一个深拷贝 的hooks，因为这地方不能老是更新
    setValues(initialValues || {});
  }, [initialValues]);

  // 设置 value
  const setValue = useCallback(
    (key, value) => {
      setValues({
        ...values,
        [key]: value,
      });
    },
    [values],
  );

  // 获取 校验后的
  const getFieldsValue = useCallback(() => {
    return values;
  }, [values]);

  // 设置表单的值
  // todo    设置的值有可能会不生效，  子节点也有存  values，一块更新的时候，可能会被覆盖    因为子节点也可可能在操作这个值 哎
  // 在change的时候 和这个在一块使用的时候，要注意一定要 同步操作，不然顺序很难保证   详见  regionSelectItem.js 里面的change
  //
  const setFieldsValue = useCallback(
    obj => {
      setValues({ ...values, ...obj });
    },
    [values],
  );

  // 表单校验
  const validateFields = useCallback(
    fun => {
      let error = false;
      // 必填校验
      // for (let i = 0; i < requireArr.current.length; i++) {
      //   if (!values[requireArr.current[i].name] && values[requireArr.current[i].name] !== 0) {
      //     Taro.showToast({
      //       title: `[${requireArr.current[i].label}]字段不能为空`,
      //       icon: 'none',
      //     });
      //     error = true;
      //     fun(values, error);
      //     return;
      //   }
      // }
      return fun(values, error);
    },
    [values],
  );

  // 获取子节点的props   校验信息都要从这个里面拿到，然后分析
  const getChildrenProps = () => {
    const items = {};
    React.Children.forEach(children, item => {
      const childElement = item as FunctionComponentElement<itemType>;
      if (childElement.props.name) {
        items[childElement.props.name] = childElement.props;
      }
    });
    return items;
  };

  // 收集校验信息
  useEffect(() => {}, []);

  // 放开对外控制
  useEffect(() => {
    const action = {
      getFieldsValue,
      validateFields,
      setFieldsValue,
    };
    const { formRef } = props;
    if (formRef && typeof formRef !== 'function') {
      formRef.current = action;
    }
  }, [getFieldsValue, getFieldsValue, setFieldsValue]);

  // const classNameTrans = classNames('ant-form',{
  //
  // });
  return (
    <FormContext.Provider value={{ setValue, values }}>
      <form
        id={name}
        className="ant-form ant-form-horizontal"
        onSubmit={e => {
          e.preventDefault();
        }}
      >
        {props.children}
      </form>
    </FormContext.Provider>
  );
};
export default form;
